$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;

.home {
  position: relative;
  width: 100%;

  .tags {
    margin: 6vw auto 4vw auto;
    width: fit-content;
    position: relative;

    .oTag {
      width: 100%;
      display: flex;
      justify-content: center;

      .item {
        border-radius: 7.071px;
        background: #E6E6E6;
        font-size: 18px;
        text-align: center;
        width: 174.122px;
        line-height: 53.032px;
        font-weight: bold;
        cursor: pointer;
        transition: all 600ms;
      }

      .item:nth-child(1) {
        margin-right: 87.5px;
      }

      .active {
        background-color: #000;
        color: white;
      }
    }

    .tTag {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 56.57px;

      .item {
        border-radius: 7.071px;
        background: #E6E6E6;
        font-size: 18px;
        width: 163.515px;
        line-height: 53.032px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        transition: all 600ms;
      }

      .item:nth-child(2) {
        margin: 0 28.28px;
      }

      .active {
        background-color: #000;
        color: white;
      }
    }

    .lines {
      .line1 {
        position: absolute;
        left: 80.43px;
        top: 45.96px;
        opacity: 0;
      }

      .line2 {
        position: absolute;
        left: 127.28px;
        top: 45.96px;
        opacity: 0;
      }

      .line3 {
        position: absolute;
        left: 127.28px;
        top: 45.96px;
        opacity: 0;
      }

      .line4 {
        position: absolute;
        right: 148.49px;
        top: 45.96px;
        opacity: 0;
      }

      .line5 {
        position: absolute;
        right: 148.49px;
        top: 45.96px;
        opacity: 0;
      }

      .line6 {
        position: absolute;
        right: 80.43px;
        top: 45.96px;
        opacity: 0;
      }

      div {
        transition: all 600ms;
      }

      .show {
        opacity: 1;
      }
    }
  }


  .tags_phone {
    margin: 6vw auto 4vw auto;
    width: fit-content;
    position: relative;
    display: none;

    .oTag {
      width: 100%;
      display: flex;
      justify-content: center;

      .item {
        border-radius: 6px;
        background: #E6E6E6;
        font-size: 11px;
        text-align: center;
        width: 88px;
        line-height: 27px;
        font-weight: bold;
        cursor: pointer;
        transition: all 600ms;
      }
      .item:nth-child(1) {
        margin-right: 44px;
      }

      .active {
        background-color: #000;
        color: white;
      }
    }

    .tTag {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top:29.23px;

      .item {
        border-radius: 8px;
        background: #E6E6E6;
        font-size: 11px;
        width: 82.488px;
        line-height: 27px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        transition: all 600ms;
      }
      .item:nth-child(2) {
        margin: 0 14.27px;
      }

      .active {
        background-color: #000;
        color: white;
      }
    }

    .lines {
      .line1 {
        position: absolute;
        left: 44px;
        top: 24px;
        opacity: 0;
      }

      .line2 {
        position: absolute;
        left: 64px;
        top: 24px;
        opacity: 0;
      }

      .line3 {
        position: absolute;
        left: 64.25px;
        top: 24.11px;
        opacity: 0;
      }

      .line4 {
        position: absolute;
        right: 74px;
        top: 24px;
        opacity: 0;
      }

      .line5 {
        position: absolute;
        right: 74px;
        top: 24px;
        opacity: 0;
      }

      .line6 {
        position: absolute;
        right: 38px;
        top: 24px;
        opacity: 0;
      }

      div {
        transition: all 600ms;
      }

      .show {
        opacity: 1;
      }
    }
  }

  .list {
    .item {
      background-color: #000;
      padding: 0 0 5vw 0;

      .pic {
        position: relative;

        img {
          width: 100%;
          display: block;
          object-fit: cover;
        }

        .text {
          color: white;
          text-align: center;
          position: absolute;
          left: 0;
          top: 2vw;
          width: 100%;

          .t1 {
            font-size: 154/19.2+vw;
            font-weight: bold;
          }

          .des {
            font-size: $fontSize_22;
            text-transform: uppercase;
          }
        }
      }

      a {
        background-color: white;
        width: fit-content;
        margin: 2vw auto 0 auto;
        display: block;
        color: #000;
        font-size: $fontSize_32;
        padding: 12px 30px;
        border-radius: 10px;
        text-transform: capitalize;
        font-weight: 700;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .tags {
      width: 100%;
      display: none;
    }

    .tags_phone {
      display: block;
      margin-top: 70px;
    }

    .list {
      .item {
        padding: 30px 0;

        .pic {
          display: flex;
          flex-direction: column-reverse;

          .text {
            position: static;

            .t1 {
              font-size: 36px;
            }

            .des {
              font-size: 16px;
            }
          }
        }

        a {
          font-size: 16px;
          margin-top: 30px;
        }
      }
    }
  }
}